<template>
<div class="get-address-wrapper">
  <search-header ref="header" searchPlaceHolder="搜索附近位置" @submitSearch="search"></search-header>
  <ul>
    <li v-for="(item, index) in addressList" :key="index" @click="getAddress(item)">
      <p class="title">{{item.name}}</p>
      <p v-if="item.address" class="address">{{item.address}}</p>
    </li>
  </ul>
</div>
</template>

<script>
import SearchHeader from '@/components/seach-header/seach-header'
import { getNearby } from '@/assets/js/amap'
import nativeBridge from '@/assets/js/nativeBridge'

export default {
  data () {
    return {
      position: [],
      addressList: [
        {
          id: 0,
          publishAddress: '不显示位置'
        }
      ]
    }
  },
  components: {
    SearchHeader
  },
  created () {
    this.search('')
  },
  methods: {
    search (value) {
      const _self = this
      this.$vux.loading.show({
        text: '获取附近位置中...',
        position: 'fixed'
      })
      nativeBridge.getPosition(this, (arg) => {
        _self.position = [arg.longitude, arg.latitude]
        getNearby({
          position: _self.position,
          keywords: value
        }, (data) => {
          _self.addressList = [{id: 0, name: '不显示位置'}].concat(data)
          _self.$vux.loading.hide()
        }, (msg) => {
          _self.$vux.toast.text(msg, 'middle')
          _self.$vux.loading.hide()
        })
      })
    },
    getAddress (item) {
      if (item.id === 0) {
        this.$parent.address = null
      } else {
        this.$parent.address = {
          address: item.address + item.name,
          longitude: item.location.split(',')[0],
          latitude: item.location.split(',')[1]
        }
      }
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
.get-address-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 101;

  ul {
    padding: 5px 15px;
    list-style: none;

    li {
      border-bottom: 1px solid #e6e6e6;
      padding: 5px;
      .title {

      }

      .address {
        color: #999;
        font-size: 13px;
      }
    }
  }
}
</style>

